<template>
    <div class="my-form">
        <form @submit.prevent="submit">
            <div>
                <label for="mobile">手机号:</label>
                <input type="text" name="mobile" v-model="mobile" placeholder="请输入手机号">
            </div>
            <div>
                <label for="code">验证码:</label>
                <input type="text" name="code" v-model="code" placeholder="请输入验证码">
               
            </div>

            <input type="submit" value="登录">
        </form>
    </div>
</template>

<script>
    import MyCode from '../sendCode/myCode.vue';
    const regCode = /^\d{4}$/
    export default {
        name: "",
        components: {
            MyCode,
        },
        data() {
            return {
                mobile: "",
                code: "",
                disabled: true,
                hasCode: false
            };
        },
        mounted() {},
        methods: {
            showLoading(msg) {
                this.$loading.show(msg)
                setTimeout(() => {
                    this.$loading.hide()
                }, 1000)
            },

            checkLogin() {
                if (this.mobile && this.code && this.hasCode) {
                    this.disabled = false
                } else {
                    this.disabled = true
                }
            },

            getCode(flag) {
                this.hasCode = flag
            },

            submit() {
                if (!regCode.test(this.code)) {
                    this.showLoading('验证码不正确')
                    return
                }
                this.showLoading('登录成功')
                this.$router.push('/about')
            }
        },
        watch: {
            mobile() {
                this.checkLogin()
            },

            code() {
                this.checkLogin()
            }
        }
    };
</script>

<style lang='scss'>
    .my-form div {
        text-align: left;
        margin-bottom: 10px;
    }

    .my-form div input {
        width: 200px;
        height: 30px;
    }

    input[type=submit] {
        width: 80px;
        height: 30px;
        margin: 0 suto;
        border: 0;
        color: #fff;
        background: rgb(5, 196, 68);
        border-radius: 4px;
        text-align: center;
    }

    input[disabled] {
        background-color: #ccc;
        color: #eee;
    }
</style>